<template>
  <Nav_bar :isLeftArrow="false" :title="'我的'" />
  <div class="ivestorMyBox">
    <div class="userInfoBox">
      <van-image width="85" height="85" :src="headImg" />
      <div class="userBasicBox">
        <div class="userName">名称：{{ userInfoStore.userInfo.nickName }}</div>
        <div class="userPhone">账号：{{ phoneInfoStore.phone }}</div>
      </div>
    </div>
    <div v-for="item in list" :key="item.title" class="cashBox" @click="skip(item.title)">
      <span class="icon" :class="item.icon"></span>
      <span class="tixain">{{ item.title }}</span>
      <span class="icon arrow"></span>
    </div>
  </div>
  <van-button class="logOut" type="default" block @click="logOut()">退出登录</van-button>
  <Tabbar />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { usePhoneInfoStore, useUserInfoStore } from '@/stores'
import headImg from '/src/assets/images/headImg.png'

const $router = useRouter()
const phoneInfoStore = usePhoneInfoStore()
const userInfoStore = useUserInfoStore()
const list = [
  { icon: 'cash', title: '提现' },
  { icon: 'Frame', title: '修改密码' },
]
/** 点击跳转到体现页面 */
const skip = (title) => {
  if (title === '提现') {
    $router.push('/ivestorCash')
  } else {
    $router.push('/ivestorChangePaw')
  }
}
/** 点击退出投资人系统 */
const logOut = () => {
  userInfoStore.deleteUserInfo()
  userInfoStore.deleteToken()
  localStorage.removeItem('userInfo')
  $router.push('/login')
}
</script>

<style lang="scss" scoped>
.ivestorMyBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 14px;
  .userInfoBox {
    display: flex;
    align-items: center;
    border-radius: 5px;
    width: 347px;
    height: 100px;
    background: #fff;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09));
    .userBasicBox {
      height: 68px;
      min-width: 165px;
      margin: 19px 0 0 13px;
      .userName {
        color: #444;
        font-size: 20px;
      }
      .userPhone {
        margin-top: 6px;
        color: #999;
        font-size: 14px;
      }
    }
  }
  .cashBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 347px;
    height: 58px;
    padding: 0 4px 0 12px;
    font-size: 14px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
    margin-top: 14px;
    .cash {
      font-size: 24px;
      color: #ffb800;
    }
    .tixain {
      margin-left: 11px;
      flex: 1;
      text-align: left;
    }
    .Frame {
      font-size: 24px;
      color: #42c852;
    }
  }
}
.logOut {
  position: fixed;
  left: 14px;
  bottom: 99px;
  width: 347px;
  height: 46px;
  color: #fff;
  font-size: 12px;
  background: linear-gradient(to right, #70e2c1, #11c58f);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09));
}
</style>
